<script setup lang="ts">
import {getOrder} from "@/api/search.ts";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {Result} from "@/type.ts"
import Order from "@/components/order.vue";



const productNo = ref<string>("")
const dialogFormVisible = ref(false)
const token = ref<string>("")
const searchResult = ref<Result>({
  name: "",
  operatorRecord: undefined,
  operatorStatus: "",
  product: undefined,
  productNo: "",
  refundRecord: undefined,
  refundStatus: ""
})

function submit() {

  if (productNo.value === '') {
    ElMessage.error("订单号不能为空！")
    return
  }

  getOrder(productNo.value).then(res => {
    if (res.code == 403) {
      ElMessage.error(res.msg)
      dialogFormVisible.value = true
      return
    }
    searchResult.value = res.data
    console.log(searchResult.value)
  })
}

function confirmToken() {
  dialogFormVisible.value = false
  localStorage.setItem("search_token", token.value)
  // 刷新页面，保证缓存生效
  location.reload()
}


</script>

<template>
  <div class="page-content">
    <el-card style="width: 100%;margin-bottom: 16px">
      <div class="search-box">
        <el-input v-model:model-value="productNo" placeholder="Place input productNo or phoneNumber"></el-input>
        <el-button type="primary" @click="submit"> 搜索</el-button>
      </div>
    </el-card>

    <order :data="searchResult"></order>

    <!--    token dialog-->
    <el-dialog v-model="dialogFormVisible" title="请输入Token" width="500">
      <el-form>
        <el-form-item label="Token:">
          <el-input v-model="token" autocomplete="off"/>
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="confirmToken">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.page-content {
  width: 70%;
  height: 100%;
  margin: 0 auto;
}


.search-box {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 10px;
  flex-direction: row;
}

.entity_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.info_title {
  width: 100%;
  display: flex;
  font-size: 20px;
  font-weight: bold;
  flex-direction: row;
  justify-content: space-between;


}

@media (max-width: 810px ) {
  .info_title {
    text-align: start;
    flex-direction: column;
  }
}

.custom_table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  line-height: 30px;
}

.custom_tr th, td {
  border: 1px solid black;

}

.title {
  width: 100%;
  text-align: start;
  font-size: 20px;
  margin-top: 8px;
  margin-bottom: 4px;
}

</style>